<template>
	<div id="map-container" class="map" ref="mapRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import L from "leaflet";
import 'leaflet/dist/leaflet.css'
// import "leaflet.heat";
// import "leaflet-editable";
// import { getBaseStations } from "@/api/home";
// import icons from "../../assets/images/";
// import NewUrl from "";
import { ElMessage } from "element-plus";
const props = defineProps({
	points: {
		type: Array,
		default() {
			return [];
		}
	}
});
const mapRef = ref<HTMLDivElement>();
const emit = defineEmits(["getBases"]);
const map = ref<any>();
const marker = ref(""); //点击基站图标
const editlayers = ref([]);
const heat = ref(null);
// const icons = ref(icons);
// const NewUrl = ref(NewUrl);
//const Url = ref(window.mapUrl + "/mapservice/MapImageServer?Z=14&C=13152&R=6532&Layer=shanxisl&type=normal");
// watch: {
// 	points() {
// 		this.updateMap();
// 	}
// },
onMounted(() => {
	init();
});
// beforeUnmount() {
// 	map.value.off();
// 	map.value.remove();
// },

const init = () => {
	let mm = L.map("map-container", {
		center: L.latLng(34.26562, 108.95351), // 地图中心
		zoom: 13, //缩放比列
		minZoom: 5,
		// zoomControl: false, //禁用 + - 按钮
		doubleClickZoom: false, // 禁用双击放大
		attributionControl: false, // 移除右下角leaflet标识
		// editable: true //地图编辑
	});
	// tileLayer 用于在地图上加载和显示瓦片图层。
	// {s} 是指可用的子域之一（按顺序使用，以帮助解决每个域的浏览器并行请求限制；子域值在选项中指定;默认为 a, b 或 c , 可以省略), {z} — 缩放级别, {x} 和 {y} — 瓦片坐标。 {r} 可以用来在URL中添加 "@2x" 以加载视网膜瓦片
	let gaoDeLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' });
	gaoDeLayer.addTo(mm);
	// L.heatLayer(props.points).addTo(map.value);
	// map.value.on({
	//   movestart: function () {
	//     draw = false;
	//   },
	//   moveend: function () {
	//     draw = false;
	//   },
	//   mousemove: function (e) {
	//     if (draw) {
	//       heat.addLatLng(e.latlng);
	//     }
	//   },
	// });
	// 框选
	/*
	L.EditControl = L.Control.extend({
		options: {
			position: "topleft",
			callback: null,
			kind: "",
			html: ""
		},
		onAdd(map) {
			let container = L.DomUtil.create("div", "leaflet-control leaflet-bar");
			let link = L.DomUtil.create("a", "", container);
			link.href = "#";
			link.title = "框选";
			link.innerHTML = options.html;
			L.DomEvent.on(link, "click", L.DomEvent.stop).on(
				link,
				"click",
				function () {
					window.LAYER = options.callback.call(map.editTools);
				},
				this
			);
			return container;
		}
	});
	L.NewRectangleControl = L.EditControl.extend({
		options: {
			position: "topleft",
			callback: map.value.editTools.startRectangle,
			kind: "rectangle",
			html: "<i class='el-icon-edit'></i>"
		}
	});
	map.value.addControl(new L.NewRectangleControl());
	// var rec = L.rectangle([
	//   [43.1235, 1.255],
	//   [43.1235, 1.259],
	// ]).addTo(map.value);
	// rec.enableEdit();
	// rec.on("dbclick", L.DomEvent.stop).on("dbclick", rec.toggleEdit);
	map.value.editTools.on("editable:drawing:end", e => {
		// console.log(e);
		// let arr = [];
		// e.layer._latlngs[0].forEach((item) => {
		//   arr.push({ lat: item.lat, lon: item.lng });
		// });
		editlayers.value.forEach(item => {
			map.value.removeLayer(item);
		});
	});
	map.value.editTools.on("editable:vertex:dragend", e => {
		// editlayers.value.forEach((item) => {
		//   map.value.removeLayer(item);
		// });
		editlayers.value.push(e.layer);
		getStations(e);
	});
	L.DeleteControl = L.Control.extend({
		options: {
			position: "topleft",
			callback: null,
			kind: "rectangle",
			html: "<i class='el-icon-delete'></i>"
		},
		onAdd(map) {
			let container = L.DomUtil.create("div", "leaflet-control leaflet-bar");
			let link = L.DomUtil.create("a", "", container);
			link.href = "#";
			link.title = "清除";
			link.innerHTML = this.options.html;
			L.DomEvent.on(link, "click", L.DomEvent.stop).on(
				link,
				"click",
				function () {
					if (_editlayers.value.length > 0) {
						_editlayers.value.forEach(item => {
							map.removeLayer(item);
						});
						_editlayers.value = [];
						emit("getBases");
					}
				},
				this
			);
			return container;
		}
	});
	map.value.addControl(new L.DeleteControl());
	*/
};
// 定位
const dingwei = val => {
	if (val[0].lat !== "" && val[0].lat !== null && val[0].lon !== "" && val[0].lon !== null) {
		map.value.eachLayer(layer => {
			if (layer.options.icon) {
				if (layer.options.icon.options.iconUrl === NewUrl.value) {
					layer.setIcon(
						L.icon({
							iconUrl: icons.value,
							iconSize: [20, 20]
						})
					);
				}
				let pos = layer.getLatLng();
				if (pos.lat == val[0].lat && pos.lng == val[0].lon) {
					layer.setIcon(
						L.icon({
							iconUrl: NewUrl.value,
							iconSize: [30, 30]
						})
					);
				}
			}
			map.value.panTo([val[0].lat, val[0].lon], {
				animate: true
			});
		});
	} else {
		message("该数据没有基站信息");
	}
};
const getposition = val => {
	map.value.panTo([val.lat, val.lon], {
		animate: true
	});
};
// 提取经纬度
const getLats = val => {
	let arr = [];
	val.layer._latlngs[0].forEach(item => {
		arr.push({ lat: item.lat, lon: item.lng });
	});
	return arr;
};
const getStations = async val => {
	// let latList = getLats(val);
	// const { data: res } = await getBaseStations({
	// 	query_data: JSON.stringify(latList)
	// });
	// if (res.statusCode === "0") {
	// 	if (res.data.list.length > 200) {
	// 		ElMessage.error("框选区域包含基站过多，请重新框选");
	// 		map.value.removeLayer(val.layer);
	// 	} else {
	// 		let baseList = [];
	// 		res.data.list.forEach(item => {
	// 			baseList.push({ tac: item.lac, uli: item.ci });
	// 		});
	// 		emit("getBases", baseList);
	// 	}
	// }
};
// 热力图数据更新
const updateMap = () => {
	if (editlayers.value.length > 0) {
		clear();
	}
	if (heat.value) {
		map.value.removeLayer(heat.value);
		heat.value = L.heatLayer(props.points).addTo(map.value);
	} else {
		heat.value = L.heatLayer(props.points).addTo(map.value);
	}
};
// 清除框选
const clear = () => {
	editlayers.value.forEach(item => {
		map.value.removeLayer(item);
	});
	editlayers.value = [];
};
</script>

<style>
.map {
	width: 400px;
	height: 300px;
	border: 1px solid red
		/* width: 100%;
	height: 100%; */
}

.toolclick {
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border-color: rgba(0, 0, 0, 0.1);
	padding: 10px 18px;
	z-index: 99;
	font-size: 14px;
}

.TooltipAdress {
	/* display: flex; */
}

.location {
	width: 150px;
	word-wrap: break-word;
	word-break: break-all;
	white-space: pre-wrap;
}

.contentHighlight {
	/* padding: 5px; */
	/* background: pink; */
	/* margin-top: 5px; */
	width: 25px !important;
	height: 25px !important;
	/* border: 1px solid red; */
	border-radius: 50%;
	margin-left: -18px !important;
	margin-top: -27px !important;
	/* -webkit-animation-name: "ripple";
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate; */
}
</style>
